﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>无标题文档</title>
<link href="../css/admin/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/css3/animate.css" rel="stylesheet" type="text/css" />
<link href="../css/fonts.css" rel="stylesheet" type="text/css" />
<link href="../css/icons.css" rel="stylesheet" type="text/css" />
<link href="../css/admin/style.css" rel="stylesheet" type="text/css" />
<link href="../css/admin/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<!-- head star -->
	<div class="tnav row wrapper border-bottom white-bg page-heading">
		<div class="col-sm-4">
           <h2 class="fl">项目</h2>
           <ol class="breadcrumb fl">
	           <li><a href="index.html">主页</a></li>
	           <li><strong>项目</strong></li>
            </ol>
        </div>
	</div>
	<!-- head end -->	
	
	<!-- table star -->
	<div class="row col-lg-12">
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="ibox">
				<div class="ibox-title"><h5>所有项目</h5>
                   <div class="ibox-tools rboor">
                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-plus"></i> 创建新项目</a>
                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-pencil2"></i> 编辑</a>
                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-remove4"></i> 删除</a>
                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-spell-check"></i> 批量审核</a>
                        <button id="tb-refresh" href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-spinner10 fa-spin"></i> 刷新</button>
                   </div>
                </div>
                
                <div class="ibox-content">
                	<!-- search star -->
                	<div class="form-horizontal clearfix">                		
	                     <div class="col-lg-4 col-sm-3 pl0">
		                     <div class="form-group">
		                           <div class="col-lg-8 col-sm-7">
		                                 <select class="input-sm form-control input-s-sm inline">
                                            <option value="0">请选择</option>
                                            <option value="1">冻结</option>
                                            <option value="2">开放</option>
                                            <option value="3">审核</option>
                                        </select>
		                           </div>
		                     </div>
	                     </div>
	                     <div class="col-lg-4 col-sm-5">
		                     <div class="form-group">
		                           <label class="col-lg-3  col-sm-3 control-label">日期：</label>
		                           <div class="col-lg-8 col-sm-8 input-group date">
		                           		<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
		                                 <input type="email" placeholder="2014-11-17" class="input-sm form-control">
		                                 <span class="input-group-addon">到</span>
		                                 <input type="text" class="input-sm form-control" name="end" value="" placeholder="2014-11-17">
		                           </div>
		                     </div>
	                     </div>
	                     <div class="col-lg-4 col-sm-4">
		                	<div class="form-group">
		                           <div class="col-lg-12 col-sm-12 input-group">
		                                 <input type="email" placeholder="请输入关键字" class="input-sm form-control">
		                                 <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
		                           </div>
		                     </div>
	                     </div>
                     </div>
                     <!-- search end -->
                	<table id="example" class="table table-striped table-bordered table-hover dataTables-example dataTable" cellspacing="0" width="100%">
                		<thead>
							<tr>
								<th class="tn"><input id="checkall" name="" type="checkbox" value=""></th>
								<th>姓名</th>
								<th>地址</th>
								<th>详细地址</th>
								<th>年龄</th>
								<th>日期</th>
								<th>工资</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Tiger Nixon</td>
								<td>System Architect</td>
								<td>Edinburgh</td>
								<td>61</td>
								<td>2011/04/25</td>
								<td>$320,800</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Garrett Winters</td>
								<td>Accountant</td>
								<td>Tokyo</td>
								<td>63</td>
								<td>2011/07/25</td>
								<td>$170,750</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Ashton Cox</td>
								<td>Junior Technical Author</td>
								<td>San Francisco</td>
								<td>66</td>
								<td>2009/01/12</td>
								<td>$86,000</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Cedric Kelly</td>
								<td>Senior Javascript Developer</td>
								<td>Edinburgh</td>
								<td>22</td>
								<td>2012/03/29</td>
								<td>$433,060</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Airi Satou</td>
								<td>Accountant</td>
								<td>Tokyo</td>
								<td>33</td>
								<td>2008/11/28</td>
								<td>$162,700</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Brielle Williamson</td>
								<td>Integration Specialist</td>
								<td>New York</td>
								<td>61</td>
								<td>2012/12/02</td>
								<td>$372,000</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Herrod Chandler</td>
								<td>Sales Assistant</td>
								<td>San Francisco</td>
								<td>59</td>
								<td>2012/08/06</td>
								<td>$137,500</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Ashton Cox</td>
								<td>Junior Technical Author</td>
								<td>San Francisco</td>
								<td>66</td>
								<td>2009/01/12</td>
								<td>$86,000</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Cedric Kelly</td>
								<td>Senior Javascript Developer</td>
								<td>Edinburgh</td>
								<td>22</td>
								<td>2012/03/29</td>
								<td>$433,060</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Airi Satou</td>
								<td>Accountant</td>
								<td>Tokyo</td>
								<td>33</td>
								<td>2008/11/28</td>
								<td>$162,700</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Brielle Williamson</td>
								<td>Integration Specialist</td>
								<td>New York</td>
								<td>61</td>
								<td>2012/12/02</td>
								<td>$372,000</td>
							</tr>
							<tr>
								<td><input id="checkall" name="" type="checkbox" value=""></td>
								<td>Herrod Chandler</td>
								<td>Sales Assistant</td>
								<td>San Francisco</td>
								<td>59</td>
								<td>2012/08/06</td>
								<td>$137,500</td>
							</tr>
						  </tbody>
                	  </table>
                </div>
                
			</div>
		</div>
	</div>
	<!-- table end -->
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/admin/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/admin/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/admin/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="../js/admin/colResizable-1.5.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		var table = $('#example').DataTable({
			"pagingType":   "full_numbers",
			"sLoadingRecords": "正在加载数据...",
			"sZeroRecords": "暂无数据",
			stateSave: true,
			"searching": false,
			"dom": 'rt<"bottom"iflp<"clear">>',			
             "aoColumnDefs": [ { "bSortable": false, "aTargets": [0] },{ "class": "tn", "targets": [ 0 ] },
             	{
		           "targets": [ 4 ],
		           "data": "download_link",
		           "render": function ( data, type, full ) {
		             return ''+seAge(data)+'';
		           }
		         }],
			"language": {
                 "processing": "玩命加载中...",
				"lengthMenu": "显示 _MENU_ 项结果",
				"zeroRecords": "没有匹配结果",
				"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
				"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
				"infoFiltered": "(由 _MAX_ 项结果过滤)",
				"infoPostFix": "",
				"url": "",
				"paginate": {
					"first":    "首页",
					"previous": "上一页",
					"next":     "下一页",
					"last":     "末页"
				}
           },
           _fnPageChange:function(){
           	alert("1111");
           }
            
		});
		
		//单机行，选中复选框
		$("#example tr").slice(1).each(function(g){
			var p = this;
			$(this).children().slice(1).click(function(){
				$($(p).children()[0]).children().each(function(){
					if(this.type=="checkbox"){
						if(!this.checked){
							this.checked = true;
						}else{
							this.checked = false;
						}
					}
				});
			});
		});
		
		
		//使用col插件实现表格头宽度拖拽
		$(".table").colResizable();
		
		//在搜索，或者分页的时候，调用该方法
		//这里只做具体说明，没有做实际服务端数据测试
		//重新加载表格数据（同等于刷新）
		//添加fnReloadAjax  js引用
		//参考http://www.datatables.net/plug-ins/api/fnReloadAjax
		$("#tb-refresh").on("click",function(){
			//加载一个新的文件
			//fnReloadAjax方法有3个主要参数
			//1、oSettings=[类似jquery ajax的data:{id:2}]
			//2、sNewSource=加载数据的URL
			//3、回调函数fnCallback
			//table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
			//刷新新的数据
			//table.fnReloadAjax();
		});
		
	})
	
	
	
	function seAge(a){
		if(a<20){return "少年";}
		if(a>=20 && a<45){return "<span class='text-navy'><i class='fa fa-level-up'></i> 青年</span>";}
		if(a>=45){return "<span class='text-warning'><i class='fa fa-level-down'></i> 老年</span>";}
	}
	
</script>

